<template>
  <div>
    <unit-table
      ref="unitTable"
      :columns="this.$staticMenu.needsColumns"
      :params="tableParams"
      :size="pageSize"
      selectType="checkbox"
      :sizeOptions="pageSizeOptions"
      :type="tableType"
      :url="tableUrl"
      rowKeyName="id"
      @onSelect="tableOnSelect"
    >
      <!-- 补充搜索条件 -->
      <a-row slot="searchCri">
        <a-col :span="3">
          <a-input v-model="tableParams.name" class="searchCriteria" placeholder="需求名称"/>
        </a-col>
        <a-col :span="21">
          <a-button type="primary" @click="criteriaSearch">
            <a-icon type="search"/>
            查询
          </a-button>
          <a-button @click="clearCriteria">
            <a-icon type="sync"/>
            </i>重置
          </a-button>
        </a-col>
      </a-row>
      <!-- end -->
       <span slot="departmentName" slot-scope="props">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{props.record.demandDes}}</span>
              </template>
              <span class="ellipsis">{{props.record.demandDes}}</span>
            </a-tooltip>
       </span>
      <span slot="statusSwitch" slot-scope="props">
			<span v-if="props.record.status=='审批通过'" class="text-success">
				{{ props.record.status }}
			</span>
			<span v-if="props.record.status=='审批拒绝'" class="text-danger">
				{{ props.record.status }}
			</span>
			<span v-if="props.record.status=='未审批'">
				{{ props.record.status }}
			</span>
		</span>
      <!-- 补充表格每行的操作 -->
      <span slot="tableRowAct" slot-scope="props">
					<a>
						<span class="ant-tag" @click="downloadData(props.record)">
							<a-icon type="download"/> 下载
						</span>
					</a>
					<a-divider type="vertical"/>
					<a>
						<span class="ant-tag ant-tag-green" @click="addHost(props.record)">
							<a-icon type="plus"/> 创建
						</span>
					</a>
				</span>
    </unit-table>
    <modal
      ref="taskModalForm"
      :demandClassify="demandclassify"
      :demandId="id"
      :demandName="name"
      :demandYear="demandyear"
      :tabType='tabType'
      :title="modalTitle"
      :visible="modalVisible"
      @cancel="handleCancel"
      @ok="handleOk"
    >
    </modal>
  </div>
</template>

<script>
  import {GETNEEDLIST} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import global from "@/../static/global.vue"
  import modal from "./taskModal"

  export default {
    name: 'allUnit',
    components: {
      unitTable,
      modal
    },
    data() {
      return {
        tableSelectedKeys: [],
        tableUrl: GETNEEDLIST.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETNEEDLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        /*modal参数*/
        modalTitle: '',     //modal标题
        modalVisible: false,    //modal关闭打开控制器
        /*调用表格组件，可选参数，其他相关搜索条件*/
        tableParams: {
          status: "审批通过",
          name: ""
        },
        name: '',
        id: '',
        demandyear: '',
        demandclassify: '',
        tabType: ''

  	}
    },
    methods: {
        /*modal确定事件*/
    handleOk (e) {
      this.modalVisible = false
    },
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      },
      /*查询按钮*/
      criteriaSearch() {
        this.$refs.unitTable.fetch(1)
      },
      /*重置按钮*/
      clearCriteria() {
        this.tableParams.name = ''
        this.$refs.unitTable.rowSelection.onChange([ ],[ ])
        this.criteriaSearch()
      },
      addHost(record) {
        this.modalTitle = "添加任务"
        this.name = record.demandName
        this.id = record.id
        this.demandyear = record.endtime
        this.demandclassify = record.demandClassify
        this.modalVisible = true
        this.creator = record.creator

       	console.log(record);
       if(record.demandClassify==='生产任务'){
         this.tabType="1";
         this.showTab = true;
       }else{
         this.tabType="2";
         this.showTab = false;
       }
      },
      /*modal确定事件*/
      handleOk(e) {
        this.modalVisible = false
      },
      /*modal取消事件*/
      handleCancel(e) {
        this.modalVisible = false
      },
      downloadData(record) {
        let id = record.id
        window.open(global.bussinessManUrl + "/demandsubmit/download?id=" + id);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .searchCriteria {
    width: 90%;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }
</style>
